<template>
	<view style="position: relative;">
		<u-swiper :list="list1" @change="e => currentNum = e.current" :autoplay="true" indicatorStyle="right: 20px"
			:height="240">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
			</view>
		</u-swiper>
		<image src="/static/images/icon_back.png" class="back" @click="goBack"></image>
		<view class="col item">
			<view class="row-between-center">
				<view class="col-center-start">
					<view class="title">
						瑞幸咖啡<span class="type">饮品</span>
					</view>

					<view class="row-h-center">
						<image src="/static/images/lucky.png" class="logo-small"></image>
						<view class="circle">薛家岛商圈</view>
					</view>
				</view>
				<image src="/static/images/lucky.png" class="logo"></image>
			</view>

			<view class="address" style="margin-top: 30rpx;">
				所在地区：<span class="address-value">山东省 青岛市 黄岛区</span>
			</view>
			<view class="address">
				详细地址：<span class="address-value">广西路60号2单元703</span>
			</view>
			<view class="line"></view>
			<view class="row">
				<view class="info col-center">
					<view class="info-title">5.0公里</view>
					<view class="info-name">店铺辐射半径</view>
				</view>
				<view class="info col-center">
					<view class="info-title">5.0公里</view>
					<view class="info-name">店铺服务半径</view>
				</view>
				<view class="info col-center">
					<view class="info-title">5.0公里</view>
					<view class="info-name">人均消费金额</view>
				</view>
				<view class="info col-center">
					<view class="info-title">5.0公里</view>
					<view class="info-name">会员储值门槛</view>
				</view>
			</view>
		</view>

		<view class="item">
			<view class="row-h-center">
				<image src="/static/images/detail_desc.png" class="item-icon"></image>
				<view class="item-name">店铺简介</view>
			</view>
			<view class="shop-bg shop-desc">
				这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介这是店铺的简介
			</view>
		</view>

		<view class="item">
			<view class="row-h-center">
				<image src="/static/images/detail_img.png" class="item-icon"></image>
				<view class="item-name">大众点评带客单价的照片</view>
			</view>
			<view class="shop-bg shop-desc">
				<u-scroll-list  indicatorColor="#e7e7f1" indicatorActiveColor="#494e5b">
					<view v-for="(item, index) in list" :key="index">
						<image :src="item.thumb" class="scorll-img"></image>
					</view>
				</u-scroll-list>
			</view>
		</view>

	<view class="item">
			<view class="row-h-center">
				<image src="/static/images/detail_reward.png" class="item-icon"></image>
				<view class="item-name">我提供的捧场福利</view>
			</view>
			<view class="reward row">
				<image src="/static/images/gift.png" class="reawrd-icon"></image>
				<view class="reward-text">一次光子嫩肤</view>
			</view>
			
			<view class="reward-price" style="margin-top: 10rpx;">价值<span class="reward-price-num">2000</span> </view>
			<view class="shop-bg shop-desc" style="margin-top: 40rpx;">
				<u-scroll-list  indicatorColor="#e7e7f1" indicatorActiveColor="#494e5b">
					<view v-for="(item, index) in list" :key="index">
						<image :src="item.thumb" class="scorll-img"></image>
					</view>
				</u-scroll-list>
			</view>
		</view>
		
		<image src="/static/images/me_detail.png" class="bottom-img" mode="widthFix"></image>
		
		<view style="height:200rpx ;"></view>
		
		<view class="bottom row-between-center">
			<view class="row-h-center" style="margin-left: 20rpx;">
				<image src="/static/images/radio_n.png" class="radio"></image>	<view class="agree">已阅读并同意名店圈<span class="agree-text">《用户服务协议》</span>与<span class="agree-text">《隐私政策》</span></view>
			</view>
			<view class="blue-circle row-center">
				<image src="/static/images/hezuo.png" class="hezuo"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				check:false,
				currentNum: 0,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				list: [{
					thumb: "https://cdn.uviewui.com/uview/goods/1.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/2.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/3.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/4.jpg"
				}, {
					thumb: "https://cdn.uviewui.com/uview/goods/5.jpg"
				}]
			}
		},
		methods: {
			goClose(){
				uni.navigateTo({
					url:'/src/pages/merchant_merchants/close_merchant'
				})
			},
			goBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	page {
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	.blue-circle{
		width: 120rpx;
		height: 120rpx;
		margin-top: -120rpx;
		background:  #3B60D3;
		border-radius: 50%;
		border: 4rpx solid #FFF;
		filter: drop-shadow(0px -4px 8px rgba(0, 0, 0, 0.10));
		.hezuo{
			width: 60rpx;
			height: 54rpx;
		}
	}
	.radio{
		width: 24rpx;
		height: 24rpx;
	}
	.agree{
		margin-left: 6rpx;
		color: #676C7F;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx; /* 180% */
	}
	.agree-text{
		color: #347FFF;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
	}
	.bottom-img{
		margin-top: 20rpx;
		width: 100%;
	}
	
	.bottom{
		width: 100%;
		bottom: 0;
		position: fixed;
		height: 120rpx;
		background: #FFF;
		.btn{
			height: 80rpx;
			width: calc(100% - 72rpx);
			margin-left: 36rpx;
			margin-right: 36rpx;
			border-radius: 40rpx;
			background:#3B60D3;
			color: #FFF;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 48rpx; /* 150% */
		}
	}
	.time{
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
	}
	
	.check{
		width: 36rpx;
		height: 36rpx;
	}
	.check-title{
		margin-left: 24rpx;
		color: #20252B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 44rpx;
	}
	.check-sort{
		color:  #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; 
	}
	
	.reward{
		margin-top: 24rpx;
		padding: 20rpx;
		background: #fff5eb;
		.reawrd-icon{
			width: 40rpx;
			height: 40rpx;
		}
		.reward-text{
			color:#FF8934;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx; /* 157.143% */
		}
	}
	.reward-price{
		color:  #20252B;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	.reward-price-num{
		margin-left: 10rpx;
		color: #FF8934;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 48rpx; /* 150% */
	}
	
	.scorll-img {
		margin-right: 20rpx;
		width: 160rpx;
		height: 200rpx;
		flex-shrink: 0;
		box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
	}

	.title {
		color: #20252B;
		font-size: 36rpx;
		font-style: normal;
		font-weight: 700;
		line-height: 52rpx;
		/* 144.444% */
	}

	.type {
		margin-left: 10rpx;
		color: #6A6876;
		font-size: 20rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 36rpx;
		/* 180% */
	}

	.logo-small {
		width: 24rpx;
		height: 24rpx;
	}

	.circle {
		margin-left: 20rrpx;
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.logo {
		width: 108rpx;
		height: 108rpx;
		flex-shrink: 0;
	}

	.address {
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.item {
		margin-bottom: 20rpx;
		padding: 30rpx 20rpx;
		background-color: white;
	}

	.item-icon {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
	}

	.item-name {
		margin-left: 14rpx;
		color: #20252B;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 700;
		line-height: 48rpx;
		/* 150% */
	}

	.shop-bg {
		margin: 24rpx;
		padding: 20rpx;
		background: #FAFAFA;
	}

	.shop-desc {
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.info {
		width: 25%;

		.info-title {
			color: #20252B;
			text-align: center;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 44rpx;
		}

		.info-name {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}
	}

	.line {
		margin-bottom: 30rpx;
		margin-top: 30rpx;
		height: 1rpx;
		background: #E6E6E6;
	}

	.address-value {
		color: #20252B;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		/* 166.667% */
	}

	.indicator {
		@include flex(row);
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		@include flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}
	.back{
		top: 80rpx;
		left: 40rpx;
		position: absolute;
		width: 64rpx;
		height: 64rpx;
	}
</style>